<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: wsh
 * @Date: 2024-05-25 17:22:31
 * @LastEditors: wsh
 * @LastEditTime: 2024-05-27 20:43:39
-->
<template>
  <div class="scroll-table" :style="{ height: height, '--base-border-color': borderColor }">
    <table class="table">
      <tr :style="headerStyle">
        <th v-for="(col, index) in column" :key="index" :style="{
          width: col.width ? col.width : `calc(100% / ${column.length})`,
          textAlign: 'center'
        }" class="overHide" :title="col.label">
          {{ col.label }}
        </th>
      </tr>
    </table>
    <vue3-seamless-scroll :list="data" :direction="direction" :hover="hover" :limitScrollNum="1" :step="step"
      class="scroll">
      <table class="table">
        <tr v-for="(row, rIndex) in data" :key="rIndex" class="hover_css" :style="columnStyle">
          <td v-for="(col, index) in column" :key="index" :style="{
            width: col.width ? col.width : `calc(100% / ${column.length})`,
            textAlign: 'center', color: 'white'
          }" :title="row[col.prop]">
            <slot v-if="!!slots[col.prop]" :name="col.prop" :row="row"> </slot>
            <span v-else style="margin: 0 auto;" class="overHide">{{ row[col.prop] }}</span>
          </td>
        </tr>
      </table>
    </vue3-seamless-scroll>
  </div>
</template>

<script setup lang="ts">
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";

type Props = {
  height?: string;
  data?: any;
  column?: any;
  step?: number;
  hover?: boolean;
  direction?: any;
  borderColor?: string;
  headerStyle?: any;
  columnStyle?: any;
};
const props = withDefaults(defineProps<Props>(), {
  height: "300px",
  data: [],
  column: [],
  step: 0.6,
  hover: true,
  direction: "up",
});

const slots = useSlots();
</script>

<style scoped lang="scss">
.overHide {
  // overflow: hidden;
  // text-overflow: ellipsis;
  // white-space: nowrap;
}

$border-color: var(--base-border-color);

.scroll {
  margin: 0px auto;
  overflow: hidden;
}

.scroll-table {
  width: 100%;
  height: 100%;
  overflow: hidden;

  .table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0px 4px;

    tr {
      // border: 1px solid $border-color;
      border: none;
      background-color: #0D344B;
      color: #fff;
    }
  }

  td,
  th {
    text-align: var(--text-align);
    padding: 5px 10px;
    border: none;
    //   border: 1px solid $border-color;
  }
}
</style>
